import React, { useState, useRef } from 'react';
import { ScrollView, View, Text, StyleSheet, TouchableOpacity, Animated, Dimensions } from 'react-native';
const listItem = ['关注', '推荐', '美力日', '国家补贴', '上新', '居家', '穿搭', '美食', '数码', '运动', '护肤', '户外', '小时达', '家装节']
interface IProps {
    children?: React.ReactNode;
    setTitle: (title: string) => void;
}
const TabItem = (props: IProps) => {
    const { setTitle } = props;
    const [selectedIndex, setSelectedIndex] = useState(0);
    const [underlinePosition] = useState(new Animated.Value(0));
    const [underlineWidth] = useState(new Animated.Value(0));
    const tabWidth = useRef(new Array(listItem.length).fill(0)); // 存储每个 tab 的宽度
    const tabMargin = 15; // 每个 tab 的左右间距
    const handlePress = (index: number, item: string) => {
        setTitle(item)
        setSelectedIndex(index);
        // 计算前面所有元素的宽度
        // 计算前面所有元素的宽度，加上左右间距
        const widthBefore = tabWidth.current.slice(0, index).reduce((acc, width) => acc + width + tabMargin * 2, 0);
        Animated.parallel([
            Animated.spring(underlinePosition, {
                toValue: widthBefore, // 移动到当前 tab 的位置
                useNativeDriver: false,
            }),
            Animated.spring(underlineWidth, {
                toValue: tabWidth.current[index], // 设置下划线的宽度
                useNativeDriver: false,
            }),
        ]).start();
    };
    return (
        <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={styles.scrollViews}>
            {listItem.map((item, index) => {
                return (
                    <View key={index} style={styles.item}>
                        <TouchableOpacity
                            onLayout={(event) => {
                                const { width } = event.nativeEvent.layout;
                                tabWidth.current[index] = width; // 获取每个 tab 的宽度
                                if (index === 0) {
                                    underlinePosition.setValue(0); // 初始化下划线位置
                                    underlineWidth.setValue(width); // 初始化下划线宽度
                                }
                            }}
                            onPress={() => handlePress(index, item)}>
                            <Text style={[styles.tabText, selectedIndex === index && styles.selectedTabText]}>{item}</Text>
                        </TouchableOpacity>

                    </View>
                )
            })}
            <Animated.View
                style={[
                    styles.underline,
                    {
                        transform: [{ translateX: underlinePosition }],
                        width: underlineWidth, // 动态设置下划线的宽度
                    },
                ]}
            />
        </ScrollView>
    );
};

const styles = StyleSheet.create({
    scrollViews: {
        marginVertical: 5,
        position: 'relative',
        width: Dimensions.get('window').width,
        maxHeight: 30,
    },
    item: {
        // backgroundColor: '#FF5733',
        padding: 5,
        marginHorizontal: 10,
        borderRadius: 10,
    },
    tabText: {
        marginHorizontal: 5,
        fontSize: 16,
        color: 'black',
    },
    selectedTabText: {

        color: '#FF6D2A', // 选中时的颜色
    },
    underline: {
        position: 'absolute',
        height: 2,
        left: 15,
        // width: 10, // 假设每个项的宽度为100
        backgroundColor: '#FF6D2A', // 下划线颜色
        bottom: 0,
    },
});
export default TabItem